<template>
  <div class="vue-container">
    <el-dialog
      ref="maxDialog"
      v-drag
      :title="ruleForm.id ? '编辑角色' : '新增角色'"
      :visible.sync="dialogVisible"
      width="900px"
      @closed="closedDialog"
    >
      <el-form
        ref="reform"
        v-loading="loading"
        :model="ruleForm"
        status-icon
        :rules="rules"
        :size="size"
        label-width="90px"
        :show-message="showMessage"
        class="demo-ruleForm"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        element-loading-text="数据正在加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="角色编码" prop="code">
              <el-input
                v-model.trim="ruleForm.code"
                :disabled="isAdmin"
                placeholder="请输入角色编码"
                type="text"
                show-word-limit
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色名称" prop="name">
              <el-input
                v-model.trim="ruleForm.name"
                placeholder="请输入角色名称"
                type="text"
                show-word-limit
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sort">
              <el-input-number
                v-model.trim="ruleForm.sort"
                placeholder="请输入排序"
                style="width: 100%;"
                :min="0"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色状态" prop="status">
              <el-radio-group v-model="ruleForm.status">
                <el-radio
                  v-for="(item, index) in obj.statusList"
                  :key="index"
                  :disabled="isAdmin"
                  :label="Number(item.code)"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单权限" prop="menuIds">
              <el-row :gutter="24">
                <el-col :span="7">
                  <el-switch
                    v-model="isAll"
                    active-text="全选"
                    inactive-text="全不选"
                    @change="changeAll"
                  />
                </el-col>
                <el-col :span="7">
                  <el-switch
                    v-model="isOpen"
                    active-text="展开"
                    inactive-text="折叠"
                    @change="changeOpen"
                  />
                </el-col>
                <el-col :span="7">
                  <el-switch
                    v-model="checkStrictly"
                    active-text="严格模式"
                    inactive-text="非严格模式"
                  />
                </el-col>
              </el-row>
              <el-card class="tree-card">
                <el-tree
                  v-if="dialogVisible"
                  ref="menuTree"
                  :data="menuTree"
                  show-checkbox
                  :default-expand-all="isOpen"
                  :check-strictly="checkStrictly"
                  node-key="id"
                  :default-expanded-keys="expandedKeys"
                  :default-checked-keys="ruleForm.menuIds"
                />
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remarks">
              <el-input
                v-model.trim="ruleForm.remarks"
                placeholder="请输入备注"
                :rows="4"
                type="textarea"
                show-word-limit
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :size="size" @click="dialogVisible = false">取消</el-button>
        <el-button v-throttle :size="size" :loading="loading" type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mixin } from '@/views/pages/mixin/save'
import { tree } from '@/api/system/menu'
import { treeToArray } from '@/utils/index'
export default {
  name: 'RoleSave',
  mixins: [mixin],
  data() {
    return {
      isAdmin: false, // 是否超级管理员
      isAll: false, // 全选/全不选
      isOpen: false, // 展开/折叠
      checkStrictly: true, // 是否开启严格模式
      allKeys: [], // 存储树的所有节点key
      expandedKeys: [], // 默认展开的节点key集合
      menuTree: [], // 菜单树数据
      // 表单对象
      ruleForm: {
        menuIds: []
      },
      // 表单校验
      rules: {
        code: [
          { required: true, message: '请输入角色编码', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 弹出窗口加载
    openDialog(rows) {
      this.getMenuTree()
      this.dialogVisible = true
      this.isAdmin = false
      this.checkStrictly = true
      if (rows) {
        this.isOpen = false
        this.getDetail(rows.id)
        if (rows.code === 'admin') {
          this.isAdmin = true
        }
        this.ruleForm = { ...this.ruleForm, ...rows }
      } else {
        this.isOpen = true
        this.ruleForm = { status: 1, sort: 0 }
      }
    },
    // 获取菜单详情
    getDetail(id) {
      this.funs['detail'](id).then(res => {
        this.ruleForm = res.data
        this.$refs.menuTree.setCheckedKeys(this.ruleForm.menuIds)
        this.expandedKeys = this.ruleForm.menuIds
      })
    },
    // 获取菜单树
    getMenuTree() {
      tree({ parentId: '0' }).then(res => {
        this.menuTree = res.data
        this.allKeys = treeToArray(JSON.parse(JSON.stringify(res.data))).map(item => item.id)
      })
    },
    // 接口调用前赋值
    submitStart() {
      const checks = this.$refs.menuTree.getCheckedNodes() || []
      this.ruleForm.menuIds = checks.map(item => item.id)
      this.ruleForm.isStatusChange = false
    },
    // 切换全选/全不选模式
    changeAll(value) {
      if (value) {
        this.$refs.menuTree.setCheckedKeys(this.allKeys)
      } else {
        this.$refs.menuTree.setCheckedKeys([])
      }
    },
    // 切换展开/折叠模式
    changeOpen(value) {
      const treeNodeList = this.$refs.menuTree.store._getAllNodes()
      treeNodeList.forEach(item => {
        item.expanded = value
      })
    }
  }
}
</script>
